<template>
  <view>
    <view class="vip">
      <view class="vip-flex">
        <view class="user-top-content">
          <image :src="userInfo.avatarUrl" class="user-top-content-image"></image>
          <view class="user-top-title">
            <view class="user-top-title-top">{{userInfo.nickName}}</view>
          </view>
        </view>
        <view class="user-top-content-r">
          <view v-if="vipInfo.vip == 0">未开通会员</view>
          <view v-else>{{vipInfo.expiretime}}到期</view>
        </view>
      </view>
    </view>
    <view class="vip-qy">
      <view class="vip-qy-title">
        <image :src="static_media.img01" class="vip-qy-image"></image>
        <view>会员专享权益</view>
      </view>
      <view class="vip-qy-flex">
        <view class="vip-qy-content">
          <image :src="static_media.img02" class="vip-qy-content-image"></image>
          <view class="vip-qy-content-flex">
            <view class="vip-qy-content-title">会员优惠券</view>
            <view class="vip-qy-content-about">购买专题享会员价</view>
          </view>
        </view>
        <view class="vip-qy-content vip-qy-content-m">
          <image :src="static_media.img03" class="vip-qy-content-image"></image>
          <view class="vip-qy-content-flex">
            <view class="vip-qy-content-title">免费课程</view>
            <view class="vip-qy-content-about">部分课程会员免费</view>
          </view>
        </view>
        <view class="vip-qy-content">
          <image :src="static_media.img04" class="vip-qy-content-image"></image>
          <view class="vip-qy-content-flex">
            <view class="vip-qy-content-title">更多权益</view>
            <view class="vip-qy-content-about">更多权益增加中</view>
          </view>
        </view>
      </view>
    </view>
    <view class="vip-qy" style=" margin-top: 0;">
      <view class="vip-qy-title">
        <image :src="static_media.img01" class="vip-qy-image"></image>
        <view>会员专享权益</view>
      </view>
      <view class="vip-qy-flex vip-qy-flex-content">
        1.会员购买部分课程可享受优惠价<br/>
        2.会员到期后权益即失效，需继承享受请及时续费
      </view>
    </view>
    <view class="vip-qy-flex-button" v-if="vipInfo.vip == 0" @tap="getVipList()">开通会员</view>
	<view v-show="showModal">
		<view class="order-pay-z" @tap="showModal = false"></view>
		<view class="order-pay">
		  <view class="order-pay-title">会员期限选择</view>
		  <view class="order-pay-flex" v-for="(item,index) in vipList" :key="index">
		    <view class="order-pay-flex-l">
		      <view class="order-pay-price">￥{{item.price}}</view>
		      <view>{{item.name}}</view>
		    </view>
		    <view class="order-pay-button" @tap="pay(item.id)">购买</view>
		  </view>
		</view>
	</view>
    <right-menu></right-menu>
  </view>
</template>
<script>
	import { mapState } from 'vuex'
    import rightMenu from '@/components/right-menu';
	import util from '@/lib/utils/index.js'
    let jweixin = require('jweixin-module');
export default {
  data(){
    return{
		vipInfo:{},
		showModal:false,
		vipList:[],
		vipId:0,//
    }
  },
  onShow(){
	  this.getIsVip();
      this.showModal = false
  },
	computed: {
		...mapState(['userInfo','appId']),
      static_media () {
        return {
          img01: this.$lib.$config.localMedia + '/static/img/vip-icon.png',
          img02: this.$lib.$config.localMedia + '/static/img/vip-icon1.png',
          img03: this.$lib.$config.localMedia + '/static/img/vip-icon2.png',
          img04: this.$lib.$config.localMedia + '/static/img/vip-icon3.png',
        }
      }
	},
  components: {rightMenu},
  methods: {
	  async getIsVip(){
	  		  let res = await this.$lib.$http.post({
	  			  url:this.$lib.$urlMap.isVip,
	  			  data:{},
	  			  needLogin:true
	  		  })
	  		  if(res.code == 1){
	  			  this.vipInfo = res.data
				  this.vipInfo.expiretime = util.timestampToTime(this.vipInfo.expiretime)
	  		  }
	  },
	  async getVipList(){
		  this.showModal = true
	  		  let res = await this.$lib.$http.post({
	  			  url : this.$lib.$urlMap.vipCardList,
	  			  data : {},
	  			  needLogin : true
	  		  });
	  		  if(res.code == 1){
	  			  this.showModal = true
	  			  this.vipList = res.data.data
	  		  }
	  },
	  async pay(id){
        let that = this
	  		  uni.showLoading({
	  		  						title: '加载中'
	  		  					});
	  		  					let res = await that.$lib.$http.post({
	  		  						url:that.$lib.$urlMap.vipPay,
	  		  						data:{
	  		  							id:id
	  		  						},
	  		  						needLogin: true
	  		  					})
	  		  					if(res.code == 1){
	  		  						uni.hideLoading();
	  		  						let data = res.data
	  		  						jweixin.config({
	  		  							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	  		  							appId: that.appId, // 必填，公众号的唯一标识
	  		  							// appId: 'wxb96be8827fb270a5', // 必填，公众号的唯一标识
	  		  							timestamp: data.timestamp, // 必填，生成签名的时间戳
	  		  							nonceStr: data.nonceStr, // 必填，生成签名的随机串
	  		  							signature: data.paySign, // 必填，签名
	  		  							jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
	  		  						});
	  		  						jweixin.ready(function() {
	  		  				
	  		  							// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
	  		  							jweixin.chooseWXPay({
	  		  								appid: that.appId,
	  		  								timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
	  		  								nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
	  		  								package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
	  		  								signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
	  		  								paySign: data.paySign, // 支付签名
	  		  								success: function(res) {
	  		  									// alert(res)
	  		  									// 支付成功后的回调函数
	  		  									uni.showToast({
	  		  										icon: 'success',
	  		  										title: '支付成功'
	  		  									})
                                              that.showModal = true
	  		  /* 									setTimeout(()=>{
	  		  										uni.navigateTo({
	  		  											url: '/pages/my/order'
	  		  										})
	  		  									},2000) */
	  		  								},
	  		  								fail:function (err) {
	  		  									// alert(err)
	  		  									uni.showToast({
	  		  										icon: 'none',
	  		  										title: (err),
	  		  										duration: 1000
	  		  									});
	  		  								}
	  		  							});
	  		  						});
	  		  					}else{
	  		  						uni.hideLoading();
									uni.showModal({
										title: '提示',
										content: res.msg,
										showCancel:false,
										success: function (res) {
											if (res.confirm) {
												console.log('用户点击确定');
											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									});
	  		  					}
	  },
  }
}
</script>
<style>
page {
  background: #f5f5f5;
}
	.active{
		border:1px solid #0000CC
	}
.vip{
  background: #282828;
  height: 162px;
  position: relative;
}
.vip-flex{
  background: url("") no-repeat right bottom;
  border-radius: 9px;
  margin: 14px;
  background-size: cover;
  height: 178px;
  z-index: 1;
  position: absolute;
  left: 3px;
  top: 12px;
  width: 92%;
  display: flex;
  align-items: self-start;
  justify-content: space-between;
  padding: 16px;
}

.user-top-content {
  display: flex;
  align-items: center;
  font-size: 15px;
}
.user-top-content-image{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 8px;
}
.user-top-content-r{
  font-size: 12px;
  color: #533306;
  border: solid 1px #533306;
  padding: 4px 10px;
  border-radius: 21px;
  margin-top: 6px;
}
.vip-qy{
  background: #fff;
  margin: 16px;
  border-radius: 10px;
  padding: 15px 6px;
  margin-top: 57px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.vip-qy-title{
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}
.vip-qy-image{
  width: 19px;
  height: 23px;
  margin-right: 4px;
}
.vip-qy-flex{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  width: 100%;
}
.vip-qy-flex-content{
  justify-content: flex-start;
  width: 93%;
}
.vip-qy-content{
  display: flex;
  align-items: center;
  flex-direction: column;
  flex: 1;
}
.vip-qy-content-flex{
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 15px;
  margin-top: 6px;
}
.vip-qy-content-about{
  font-size: 12px;
  color: #9c9c9c;
  margin-top: 2px;
}
.vip-qy-content-image{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.vip-qy-flex-button {
  background: linear-gradient(90deg, #f2e0c1 0%, #dbb16e 100%);
  margin: 0 16px;
  padding: 13px;
  border-radius: 37px;
  text-align: center;
  font-size: 16px;
  color: #000;
}
.order-pay-z{
  background: rgba(0,0,0,.45);
  width: 100%;
  z-index: 100;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.order-pay{
  background: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
  border-radius: 18px 18px 0 0;
  z-index: 11110000;
  padding-bottom: 11px;
}
.order-pay-title{
  font-size: 17px;
  text-align: center;
  line-height: 53px;
  border-bottom: solid 1px #f2f2f5;
}
.order-pay-flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 15px;
}
.order-pay-price{
  color: red;
  font-size: 19px;
  font-weight: bold;
}
.order-pay-flex-l{
  color: #949494;
  font-size: 13px;
}
.order-pay-button{
  background: linear-gradient(90deg, #f2e0c1 0%, #dbb16e 100%);
  padding: 6px 18px;
  border-radius: 23px;
  color: #3c2600;
}
</style>
